<template>
  <div class="aside">
    <nav>
      <ul>
        <!-- 点赞 -->
        <li @click="like">
          <span class="iconfont" :class="{ color: color }">&#xe60c;</span
          ><span class="sup" :class="{ changeColor: color }">{{ num }}</span>
        </li>
        <!-- 评论 -->
        <li>
          <a href="#comment">
            <span class="iconfont">&#xe684;</span>
            <span class="sup">{{ review }} </span>
          </a>
        </li>
        <!-- 收藏 -->
        <li @click="collect">
          <span class="iconfont" :class="{ color: collectColor }"
            >&#xe661;</span
          >
        </li>
        <!-- 举报 -->
        <li @click="jumpReport"><span class="iconfont">&#xe662;</span></li>
      </ul>
    </nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isFocus: false,
      num: 1,
      dianzan: [],
      color: false,
      collectColor: false,
      // 默认文章的id是0
      article_id: 0,
      // 默认评论的条数为0
      // review: 0,
      
    };
  },
  props: ['review'],
  methods: {
    // 点赞的函数，点了就加1，如果点过了再点就减1
    like() {
      if (!this.dianzan.includes("true")) {
        this.num++;
        this.dianzan.push("true");
        this.color = true;
        console.log(this.$route.params.id);
      } else if (this.dianzan.includes("true")) {
        this.dianzan.splice(0, 1);
        this.num--;
        this.color = false;
      }
    },

    // 点击收藏
    collect() {
      if (this.collectColor == false) {
        this.collectColor = true;
        alert("收藏成功");
      } else if (this.collectColor == true) {
        this.collectColor = false;
        alert("取消收藏");
      }
      this.axios({
        method: "post",
        url: "api/collectionAddDel",
        data: {
          token: this.$store.state.token,
          article_id: this.$route.params.id,
        },
      }).then((res) => {
        console.log(res, "点击了收藏的按钮");
        this.axios({
          method: "post",
          url: "api/collectionList",
          data: {
            token: this.$store.state.token,
            type: 1,
          },
        }).then((res) => {
          console.log(res, "收藏列表");
        });
      });
      // 收藏列表
    },
    // 跳转路由
    jumpReport() {
      this.$router.push({ path: "../report" });
    },
  },
  mounted() {
    // 刷新渲染收藏列表
    this.axios({
      method: "post",
      url: "api/collectionList",
      data: {
        token: this.$store.state.token,
        type: 1,
      },
    }).then((res) => {
      console.log(res, "收藏列表");
      for (let i = 0; i < res.data.data.length; i++) {
        if (res.data.data[i].article_id == this.$route.params.id) {
          this.collectColor = true;
          console.log("1");
        }
      }
    });
    // 刷新渲染评论条数
    this.axios({
      method: "post",
      url: "api/articleInfo",
      data: {
        article_id: this.$route.params.id,
      },
    }).then((res) => {
      console.log(res);
      this.review = res.data.data.data.length;
    });
    //把评论的数据传到父组件
  },
};
</script>
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  float: right;
}

nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  margin-left: -80px;
  top: 192px;
}
nav ul li {
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
  margin-bottom: 25px;
  color: #999;
  cursor: pointer;
  position: relative;
  text-align: center;
}
.iconfont {
  font-size: 20px;
  line-height: 36px;
}
nav ul li:hover {
  color: #333;
}
.sup {
  position: absolute;
  top: -10px;
  left: 65%;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 6px;
  background-color: #b2bac2;
  white-space: nowrap;
  transform: scale(0.6);
  color: #fff;
}
.color {
  color: green;
}
.changeColor {
  background-color: green;
  color: #fff;
}
</style>
